<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>mobileSelect Demo</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="../css/public.css">

    <!-- 引入样式和js文件 -->
    <link rel="stylesheet" type="text/css" href="../css/mobileSelect.css">
    <script src="../js/mobileSelect.js" type="text/javascript"></script>

</head>
<body>

<div class="contain" id="app">
    <div class="fixWidth">
        <div class="nav">
            <h1>mobileSelect Demo</h1>
        </div>
        <div class="demo">
            <div id="trigger1">单项选择</div>
        </div>
    </div>

</div>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            weekdayArr:[]
        },
        mounted (){
            //发送ajax请求， 获取所有的套餐数据， 赋值给setmdalList模型数据，用于页面展示
            axios.post("/address/findAllAddressAndId.do").then((response)=>{
                if(response.data.flag){
                    //查询成功，给模型数据赋值
                    this.data = response.data.data;
                    let weekdayArr=this.data;
                    let mobileSelect1 = new MobileSelect({
                        trigger: '#trigger1',
                        title: '单项选择',
                        wheels: [
                            {data: weekdayArr}
                        ],
                        position:[2], //初始化定位 打开时默认选中的哪个 如果不填默认为0
                        transitionEnd:function(indexArr, data){
                            //console.log(data);
                        },
                        callback:function(indexArr, data){
                            console.log(data);
                        }
                    });
                } else {
                    //查询失败，弹出提示信息
                    this.$message.error(response.data.message);
                }
            });
        }
    });
</script>

<script type="text/javascript">

    //----------------------------------------------------------
    //更多参数详情可查看文档 https://github.com/onlyhom/mobileSelect.js

    /**
     * 参数说明
     * @param trigger(必填参数) 触发对象的id/class/tag
     * @param wheels(必填参数)  数据源,需要显示的数据
     * @param title 控件标题
     * @param position 初始化定位
     * @param callback 选择成功后触发的回调函数，返回indexArr(选中的选项索引)、data(选中的数据)
     * @param transitionEnd 每一次手势滑动结束后触发的回调函数,返回indexArr(当前选中的选项索引)、data(选中的数据)
     * @param keyMap 字段名映射
     */

    /**
     * 函数说明(实例化之后才可用)
     * @function setTitle()      参数 string                 设置控件的标题
     * @function updateWheel()   参数 sliderIndex, data      重新渲染指定的轮子(可用于先实例化，后通过ajax获取数据的场景)
     * @function updateWheels()  参数 data                   重新渲染所有轮子,仅限级联数据格式使用(可用于先实例化，后通过ajax获取数据的场景)
     * @function locatePosition() 参数 sliderIndex, posIndex  传入位置数组，重定位轮子的位置
     * @function show()          参数 无参                   唤起弹窗组件
     * @function getValue()      参数 无参                   获取组件选择的值
     */




</script>



</body>
</html>